<template>
  <div>
    <Jdd-Card :padding="16" style="margin-bottom:16px;">
      <div style="font-size: 16px;">卡片列表</div>
      <div style="line-height:28px;margin-top:8px;">
        卡片式设计可以拓展信息块的视觉深度和突出可操作性。一般根据信息栏的内容而定，当信息的【内容较为复杂】且要【强调操作】时，卡片是个好选择。
        B端产品中卡片列表的使用常见于监控图-数据指标的合成展示、系统首页-各产品的集合介绍
      </div>
    </Jdd-Card>
    <div style="display:flex;margin-left:-8px;flex-wrap:wrap;">
      <Jdd-Card :padding="0" class="card-item-add">
        <div style="cursor: pointer;">
          <Jdd-Icon type="md-add" size="20" />
          <span style="font-size: 16px;;marginn-left:4px;">新增应用</span>
        </div>
      </Jdd-Card>
      <Jdd-Card v-for="index in 10" :key="index" :padding="0" class="card-item">
        <div
          style="display:flex;justify-content: space-between;box-shadow: 0 2px 4px 0 rgba(0,0,0,0.10);padding:8px;"
        >
          <div style="display:flex;align-items:center;">
            <Jdd-Icon type="logo-apple" size="18" />
            <span style="font-size: 16px;font-weight:500;">京东安全</span>
          </div>
          <div>
            <Jdd-Icon type="icon-edit" style="display:none;cursor: pointer;" size="18" />
          </div>
        </div>
        <div style="display:flex;padding:8px;border-bottom:1px solid #DDDDDD">
          <div style="flex:1;text-align:center;">
            <p style="color:#2D8CF0;font-size:16px;">{{273|commaFormat}} ms</p>
            <p style="font-size:12px;margin-top: 4px;">网络耗时</p>
          </div>
          <div style="height:42px;border-left:1px solid #DDDDDD"></div>
          <div style="flex:1;text-align:center;">
            <p style="color:#2D8CF0;font-size:16px;">{{1928|commaFormat}} ms</p>
            <p style="font-size:12px;margin-top: 4px;">Webview感知耗时</p>
          </div>
        </div>
        <div style="display:flex;padding:8px;">
          <div style="flex:1;text-align:center;">
            <p style="color:#2D8CF0;font-size:16px;">{{2123|commaFormat}} ms</p>
            <p style="font-size:12px;margin-top: 4px;">启动耗时</p>
          </div>
          <div style="height:42px;border-left:1px solid #DDDDDD"></div>
          <div style="flex:1;text-align:center;">
            <p style="color:#2D8CF0;font-size:16px;">273 ms</p>
            <p style="font-size:12px;margin-top: 4px;">页面耗时</p>
          </div>
          <div style="height:42px;border-left:1px solid #DDDDDD"></div>
          <div style="flex:1;text-align:center;">
            <p style="color:#2D8CF0;font-size:16px;">0% 12%</p>
            <p style="font-size:12px;margin-top: 4px;">错误率</p>
          </div>
        </div>
      </Jdd-Card>
    </div>
  </div>
</template>
<script>
import indexCardList from './indexCardList.js'
export default indexCardList
</script>
<style lang="less" scoped>
.card-item-add {
  margin: 8px 12px;
  height: 170px;
  width: 330px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px dotted #dddee1;

}
.card-item-add:hover {
    box-shadow: 0 0 10px 0 rgba(45,140,240,0.70);
  }
.card-item {
  margin: 8px 12px;
  height: 170px;
  width: 330px;
  padding: 0px !important;

}
.card-item:hover {
    border: 1px solid #248cef;
    box-shadow: 0 0 10px 0 rgba(45, 140, 240, 0.7);
    .icon-edit {
      display: block !important;
    }
  }
</style>
